<template>
	<view class="order-paid">
		<view class="head-navigation" :style="[{top:(statusBar-2)+ 'px'}]">
			<view class="back-box" @click="backHome()">
				<image src="/static/images/home.png" mode=""></image>
			</view>
		</view>
		
		<view class="paystate-content">
			<image src="/static/images/success.png" class="paystate" mode=""></image>
			<view class="paystate-text">支付完成！</view>
			<view class="paystate-btn" @click="backHome()">返回首页</view>
		</view>
		
		<view class="content">
			<!-- <card-com :show-gap="false">
        <view class="product">
          <image class="cover" mode="aspectFit" :src="sku.pic_url" ></image>
          <view class="desc">
            <view class="name">{{ product.title }}</view>
            <view class="sku">{{ sku.name }} × {{ amount }}</view>
            <view class="price">￥ {{ order.total_amount }}</view>
          </view>
        </view>
      </card-com> -->

			<!-- <card-com>
				<view class="bought">
					<view class="title">
						<image class="icon"
							src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/icons/circle-check.png">
						</image>
						<view class="desc">支付成功！</view>
					</view>
					<view class="check">
						<button class="button" @click="goToMyOrder">查看订单</button>
					</view>
				</view>
			</card-com> -->
			<!-- <card-com v-else>
				<view class="bought">
					<view class="title">
						<image class="icon" src="/static/images/fail.png"></image>
						<view class="desc">支付失败！</view>
					</view>
					<view class="check">
						<button class="button" @click="goToMyOrder">查看订单</button>
					</view>
				</view>
			</card-com> -->
		</view>
	</view>
</template>

<script>
	import store from 'store'
	import {
		mapGetters
	} from 'vuex'
	import {
		getOrder
	} from "api/orderApi"

	export default {
		name: "paid",
		store,
		// computed: {
		//   ...mapGetters([
		//     'product',
		//     'selectedSku',
		//     'selectedSkuCount',
		//     'order'
		//   ])
		// },
		data() {
			return {
				id: null,
				order: {},
				items: [],
				sku: {},
				product: {},
				amount: 0,
				statusBar:0
			}
		},
		
		methods: {
			show() {
				uni.getStorage({
					key: 'token',
					success: function (res) {
						console.log(res)
						if(res.data!=''){
							uni.reLaunch({
								url: '/pages/activity/activity'
							})
						}else{
							uni.reLaunch({
								url: '/pages/mine/mine'
							})
						}
					},
					fail:function(){
						uni.reLaunch({
							url: '/pages/mine/mine'
						})
					}
				})
			},
			loadOrder() {
				getOrder(this.id, {
					include: 'items.sku.product'
				}).then(response => {
					this.order = response
					this.items = response.items
					this.sku = this.items[0].sku
					this.product = this.sku.product
					this.amount = this.items[0].amount
				})
			},
			backHome() {
				uni.getStorage({
					key: 'token',
					success: function (res) {
						if(res.data!=''){
							uni.reLaunch({
								url: '/pages/activity/activity'
							})
						}else{
							uni.reLaunch({
								url: '/pages/mine/mine'
							})
						}
					},
					fail:function(){
						uni.reLaunch({
							url: '/pages/mine/mine'
						})
					}
				})
			},
			goToMyOrder() {
				uni.reLaunch({
					url: '/pages/mine/mine'
				})
			}
		},
		onLoad() {
			if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener("popstate", this.show, false);
			}
		},
		onShow() {
			let  _this = this;
			uni.getStorage({
				key: 'status_bar',
				success: function (res) {
					if(res.data!=''){
						_this.statusBar = res.data
					}
				}
			})
			// uni.getStorage({
			// 	key: 'token',
			// 	success: function (res) {
			// 		console.log(res)
			// 		if(res.data!=''){
			// 			uni.reLaunch({
			// 				url: '/pages/activity/activity'
			// 			})
			// 		}
			// 	},
			// 	fail:function(){
			// 		// uni.reLaunch({
			// 		// 	url: '/pages/mine/mine'
			// 		// })
			// 	}
			// })
			// let _this = this;
			// uni.getStorage({
			// 	key: 'payid',
			// 	success: function(res) {
			// 		_this.id = res.data;
			// 		uni.getStorage({
			// 			key: 'isBuyVip',
			// 			success: function(res) {
			// 				uni.reLaunch({
			// 					url:'/pages/mine/mine'
			// 				})
			// 			},
			// 			fail() {
			// 				_this.loadOrder()
			// 			}
			// 		})
			// 	},
			// 	fail() {
			// 		uni.getStorage({
			// 			key: 'isBuyVip',
			// 			success: function(res) {
			// 				uni.reLaunch({
			// 					url:'/pages/mine/mine'
			// 				})
			// 			},
			// 			fail() {

			// 			}
			// 		})
			// 	}
			// })
		},
		onUnload() {
			// uni.removeStorage({
			// 	key: 'payid'
			// })
			// uni.removeStorage({
			// 	key: 'isBuyVip'
			// })
			window.removeEventListener("popstate", this.show, false);
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}

	.head-navigation {
		width: 100%;
		height: 120rpx;
		background: rgba(0, 0, 0, 0);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.back-box {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			display: block;
			width: 50rpx;
			height: 50rpx;
		}
	}

	.order-paid {
		padding-top: 130rpx;

		.content {
			padding: 20rpx;

			.product {
				display: flex;
				align-items: center;

				.cover {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
				}

				.desc {
					font-size: 24rpx;
				}
			}

			.bought {
				.title {
					display: flex;
					align-items: center;
					width: 280rpx;
					margin: 0 auto;

					.icon {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}

					.desc {
						text-align: center;
						margin: 20rpx auto;
					}
				}

				.check {
					.button {
						width: 560rpx;
						height: 70rpx;
						line-height: 70rpx;
						background: linear-gradient(138deg, #FFDF63 0%, #FEBF05 100%);
						border: none;
						border-radius: 52rpx;
						font-size: 30rpx;
						color: #333333;
					}
				}
			}
		}
	}
	
	.paystate-content{
		width: 710rpx;
		height: 350rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin:100rpx auto 0;
		padding-top:50rpx;
	}
	.paystate{
		display: block;
		width: 96rpx;
		height: 96rpx;
		margin: 0 auto 30rpx;
	}
	.paystate-text{
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
		text-align: center;
	}
	.paystate-btn{
		width: 360rpx;
		height: 84rpx;
		background: #1877FF;
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		margin: 40rpx auto 0;
	}
</style>
